<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="类型" prop="subjectType">
        <el-select v-model="queryParams.subjectType" placeholder="请选择类型" clearable>
          <el-option v-for="dict in dict.type.subject_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="互动类型" prop="interaction">
        <el-select v-model="queryParams.interaction" placeholder="请选择互动类型" clearable>
          <el-option v-for="dict in dict.type.interaction_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['course:content:add']">新增</el-button>
      </el-col>
      <!--
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['course:content:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['course:content:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-lock" size="mini" :disabled="multiple" @click="online"
          v-hasPermi="['course:content:edit']">上线</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-unlock" size="mini" :disabled="multiple" @click="offline"
          v-hasPermi="['course:content:edit']">下线</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6" v-loading="loading" v-for="(item,index) in contentList">
        <el-card class="box-card">
          <el-descriptions class="margin-top" :column="1" border>
            <template slot="extra">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(item)"
                v-hasPermi="['course:content:edit']">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(item)"
                v-hasPermi="['course:content:remove']">删除</el-button>
              <el-button size="mini" v-if="item.state==1" type="text" icon="el-icon-unlock" @click="online(item)"
                v-hasPermi="['course:content:edit']">上线</el-button>
              <el-button size="mini" v-if="item.state==0" type="text" icon="el-icon-lock" @click="offline(item)"
                v-hasPermi="['course:content:edit']">下线</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                ID
              </template>
              {{item.id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                标题
              </template>
              {{item.title }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                顺序
              </template>
              {{item.sortNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                类型
              </template>
              <dict-tag :options="dict.type.subject_type" :value="item.subjectType" />
              <dict-tag v-if="item.interaction!=null&&item.interaction!='null'" :options="dict.type.interaction_type"
                :value="item.interaction" />
              <dict-tag v-if="item.template!=null&&item.template!='null'" :options="dict.type.interaction_template"
                :value="item.template" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                上线
              </template>
              <dict-tag :options="dict.type.common_state" :value="item.state" />
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <pagination v-show="contentTotal>0" :total="contentTotal" :pageSizes="pageSizes" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改题目内容对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题名称" />
        </el-form-item>
        <el-form-item label="类型" prop="subjectType">
          <el-radio-group v-model="form.subjectType" size="small">
            <el-radio v-for="dict in dict.type.subject_type" :key="dict.value" :label="dict.value"
              border>{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="互动类型" prop="interaction" v-if="form.subjectType==='interaction'">
          <el-radio-group v-model="form.interaction" size="small">
            <el-radio v-for="dict in dict.type.interaction_type" :key="dict.value" :label="dict.value"
              border>{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="互动模板" prop="template"
          v-if="form.subjectType==='interaction' && (form.interaction==='line'||form.interaction==='single_choice'||form.interaction==='mask_layer')">
          <el-radio-group v-model="form.template" size="small" @change="switchTemplate">
            <!--连线部分 -->
            <el-radio label="word_to_audio" v-if="form.interaction==='line'" border>词连音</el-radio>
            <el-radio label="word_to_image" v-if="form.interaction==='line'" border>词连图</el-radio>
            <el-radio label="image_to_audio" v-if="form.interaction==='line'" border>图连音</el-radio>
            <el-radio label="line_custom" v-if="form.interaction==='line'" border>自定义</el-radio>
            <!--单选部分 -->
            <el-radio label="image_select_word" v-if="form.interaction==='single_choice'" border>看图选词</el-radio>
            <el-radio label="word_select_image" v-if="form.interaction==='single_choice'" border>看词选图</el-radio>
            <el-radio label="audio_select_image" v-if="form.interaction==='single_choice'" border>听音选图</el-radio>
            <el-radio label="audio_select_word" v-if="form.interaction==='single_choice'" border>听音选词</el-radio>
            <el-radio label="image_select_audio" v-if="form.interaction==='single_choice'" border>看图选音</el-radio>
            <el-radio label="customize_select" v-if="form.interaction==='single_choice'" border>自定义</el-radio>
            <!--蒙层部分 -->
            <el-radio label="mask_layer1" v-if="form.interaction==='mask_layer'" border>2*3</el-radio>
            <el-radio label="mask_layer2" v-if="form.interaction==='mask_layer'" border>1*3</el-radio>
            <el-radio label="mask_layer3" v-if="form.interaction==='mask_layer'" border>2*2</el-radio>
            <el-radio label="mask_layer4" v-if="form.interaction==='mask_layer'" border>3*4</el-radio>
            <el-radio label="mask_layer5" v-if="form.interaction==='mask_layer'" border>左右</el-radio>
            <el-radio label="mask_layer6" v-if="form.interaction==='mask_layer'" border>3*5</el-radio>
            <el-radio label="mask_layer7" v-if="form.interaction==='mask_layer'" border>3*3</el-radio>
            <el-radio label="mask_layer8" v-if="form.interaction==='mask_layer'" border>1*4</el-radio>
            <el-radio label="mask_layer9" v-if="form.interaction==='mask_layer'" border>4*2</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="顺序" prop="sortNo">
          <el-input-number v-model="form.sortNo" :min="1" placeholder="请输入顺序" />
        </el-form-item>
        <el-form-item label="背景图" prop="bgImageArray" v-if="form.subjectType==='video'">
          <el-upload :limit="1" :auto-upload="false" action="" :file-list="form.imageArray"
            :class="{ uploadIconOne: showImg, uploadIcon: form.imageArray.length>=1 }"
            :on-change="(file, fileList) =>handleChange(file, fileList,'image')" accept="image/*"
            list-type="picture-card" :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'image')">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- 视频部分 -->
        <el-form-item label="使用视频" prop="videoFlag" v-if="form.subjectType==='video'">
          <el-switch v-model="form.videoFlag" active-text="使用绘本封面" :active-value="0" inactive-text="自定义"
            :inactive-value="1">
          </el-switch>
        </el-form-item>

        <el-form-item label="视频" prop="videoArray" v-if="form.subjectType==='video' && form.videoFlag==1">
          <el-upload :limit="1" :auto-upload="false" action="" ref="videoRef"
            :on-change="(file, fileList) =>handleChange(file, fileList,'video')" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'video')" accept="video/*"
            :class="{ uploadIconOne: showImg, uploadIcon: form.videoArray.length>=1 }" :file-list="form.videoArray">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <video :src="file.url" class="full-size-video" controls="controls">
                <span>您的浏览器不支持视频播放</span>
              </video>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteVideo(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="链接" prop="videoUrl" v-if="form.subjectType==='video' && form.videoFlag==1">
          <el-input v-model="form.videoUrl" placeholder="请输入链接" />
        </el-form-item>

        <!-- 图片部分 -->
        <el-form-item label="图片" prop="imageArray" v-if="form.subjectType==='image'">
          <el-upload :limit="1" :auto-upload="false" action="" :file-list="form.imageArray"
            :on-change="(file, fileList) =>handleChange(file, fileList,'image')" accept="image/*"
            :class="{ uploadIconOne: showImg, uploadIcon: form.imageArray.length>=1 }" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'image')">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="音乐" prop="musicArray" v-if="form.subjectType==='image'">
          <el-upload :auto-upload="false" action="" ref="musicRef"
            :on-change="(file, fileList) =>handleChange(file, fileList,'music')" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'music')" accept="audio/*"
            :file-list="form.musicArray">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <audio :src="file.url" class="full-size-video" controls="controls">
                <span>您的浏览器不支持音频播放</span>
              </audio>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteVideo(file,'music')">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="背景音乐" prop="videoArray" v-if="form.subjectType==='image'">
          <el-upload :limit="1" :auto-upload="false" action="" ref="videoRef"
            :class="{ uploadIconOne: showImg, uploadIcon: form.videoArray.length>=1 }"
            :on-change="(file, fileList) =>handleChange(file, fileList,'video')" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'video')" accept="audio/*"
            :file-list="form.videoArray">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <audio :src="file.url" class="full-size-video" controls="controls">
                <span>您的浏览器不支持音频播放</span>
              </audio>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteVideo(file,'video')">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </el-upload>
        </el-form-item>


        <!-- 互动部分 -->
        <el-form-item label="背景图" prop="bgImageArray" v-if="form.subjectType==='interaction'">
          <el-upload :limit="1" :auto-upload="false" action="" :file-list="form.imageArray"
            :class="{ uploadIconOne: showImg, uploadIcon: form.imageArray.length>=1 }"
            :on-change="(file, fileList) =>handleChange(file, fileList,'image')" accept="image/*"
            list-type="picture-card" :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'image')">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="主图" prop="mainImageArray" v-if="form.interaction==='drag'">
          <el-upload :auto-upload="false" action="" :file-list="form.mainImageArray" :multiple="true"
            :on-change="(file, fileList) =>handleChange(file, fileList,'main_image')" accept="image/*"
            list-type="picture-card" :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'main_image')">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="主图1" prop="main1ImageArray" v-if="form.template=='line_custom'">
          <el-upload :auto-upload="false" ref="main1ImageArrayRef" action="" :file-list="form.main1ImageArray"
            :multiple="true" :on-change="(file, fileList) =>handleChange(file, fileList,'main_image_1')"
            list-type="picture-card" :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'main_image_1')">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <!-- 判断文件类型 -->
              <template v-if="isImage(file)">
                <img :src="file.url" alt="image" class="el-upload-list__item-thumbnail">
              </template>
              <template v-else-if="isAudio(file)">
                <audio :src="file.url" class="full-size-video" controls="controls">
                  <span>您的浏览器不支持音频播放</span>
                </audio>
              </template>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteRefFile(file,'main1ImageArrayRef')">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>

          </el-upload>
        </el-form-item>
        <el-form-item label="主图2" prop="main2ImageArray" v-if="form.template=='line_custom'">
          <el-upload :auto-upload="false" action="" ref="main2ImageArrayRef" :file-list="form.main2ImageArray"
            :multiple="true" :on-change="(file, fileList) =>handleChange(file, fileList,'main_image_2')"
            list-type="picture-card" :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'main_image_2')">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <!-- 判断文件类型 -->
              <template v-if="isImage(file)">
                <img :src="file.url" alt="image" class="el-upload-list__item-thumbnail">
              </template>
              <template v-else-if="isAudio(file)">
                <audio :src="file.url" class="full-size-video" controls="controls">
                  <span>您的浏览器不支持音频播放</span>
                </audio>
              </template>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteRefFile(file,'main2ImageArrayRef')">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="背景音乐" prop="videoArray"
          v-if="form.subjectType==='interaction' && form.interaction!='mask_layer'">
          <el-upload :limit="1" :auto-upload="false" action="" ref="videoRef"
            :on-change="(file, fileList) =>handleChange(file, fileList,'video')" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'video')" accept="audio/*"
            :class="{ uploadIconOne: showImg, uploadIcon: form.videoArray.length>=1 }" :file-list="form.videoArray">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <audio :src="file.url" class="full-size-video" controls="controls">
                <span>您的浏览器不支持音频播放</span>
              </audio>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteVideo(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="模式" prop="wordSpelling" v-if="form.interaction=='word_spelling'||form.interaction=='dub'">
          <el-switch v-model="form.wordSpelling" active-value="1" inactive-value="2" active-text="单词模式"
            @change="switchModel" inactive-text="句子模式">
          </el-switch>
        </el-form-item>

        <el-form-item label="选单词" prop="words"
          v-if="wordsCondition(form.interaction)&&form.template!='line_custom' && form.wordSpelling==1 && form.template!='customize_select'">
          <el-tag :key="word" v-for="word in form.words" closable :disable-transitions="false"
            @close="handleClose(word)">
            {{word}}
          </el-tag>
          <el-button size="small" :style="{ 'margin-left': form.words.length > 0 ? '4px' : '0' }" icon="el-icon-plus"
            @click="openSelectWord(1)">添加单词</el-button>
        </el-form-item>
        <!-- 自定义选择 S-->
        <el-form-item label="题目" prop="subjectText" v-if="form.template==='customize_select'">
          <el-input v-model="form.subjectText" placeholder="请输入题目名称" />
        </el-form-item>
        <el-form-item label="图片" prop="subjectAudioAndSubjectImage" v-if="form.template==='customize_select'">
          <el-upload :limit="1" :auto-upload="false" action="" :file-list="form.subjectImage"
            :on-change="(file, fileList) =>handleChange(file, fileList,'subjectImage')" accept="image/*"
            :class="{ uploadIconOne: showImg, uploadIcon: form.subjectImage.length>=1 }" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'subjectImage')">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="音乐" prop="subjectAudioAndSubjectImage" v-if="form.template==='customize_select'">
          <el-upload :limit="1" :auto-upload="false" action="" ref="subjectAudioRef"
            :on-change="(file, fileList) =>handleChange(file, fileList,'subjectAudio')"
            :class="{ uploadIconOne: showImg, uploadIcon: form.subjectAudio.length>=1 }" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'subjectAudio')" accept="audio/*"
            :file-list="form.subjectAudio">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <audio :src="file.url" class="full-size-video" controls="controls">
                <span>您的浏览器不支持音频播放</span>
              </audio>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteVideo(file,'subjectAudio')">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="选项类型" prop="selectOptionEnum" v-if="form.template==='customize_select'">
          <el-radio-group v-model="form.selectOptionEnum" size="small" @change="switchSelectOptionModel">
            <el-radio
              v-for="dict in [{'value':'image','label':'图片'},{'value':'audio','label':'音频'},{'value':'text','label':'文本'},]"
              :key="dict.value" :label="dict.value" border>{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选项内容" prop="selectOptionVOList"
          v-if="form.template=='customize_select' && form.selectOptionEnum=='text'">
          <el-radio-group v-model="form.rightWord" size="small">
            <el-radio :key="word" v-for="(word,index) in form.selectOptionVOList" :label="word.textContent"
              border>{{ String.fromCharCode(65 + index) }}. {{word.textContent}} <i class="el-icon-delete"
                @click="handleSelectClose(word)"></i></el-radio>
          </el-radio-group>

          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputSelectConfirm" @blur="handleInputSelectConfirm">
          </el-input>

          <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput">添加内容</el-button>
        </el-form-item>

        <el-form-item label="选项内容" prop="selectOptionVOList"
          v-if="form.template=='customize_select' &&(form.selectOptionEnum=='image'||form.selectOptionEnum=='audio')">

          <el-upload v-if="form.selectOptionEnum=='image'" multiple :auto-upload="false" action=""
            :on-change="handleSelectOptionChange" accept="image/*" :show-file-list="false">
            <el-button size="small" type="primary">点击选择文件</el-button>
          </el-upload>
          <el-upload v-if="form.selectOptionEnum=='audio'" multiple :auto-upload="false" action=""
            :on-change="handleSelectOptionChange" accept="audio/*" :show-file-list="false">
            <el-button size="small" type="primary">点击选择文件</el-button>
          </el-upload>

          <el-table :data="form.selectOptionVOList" tooltip-effect="dark" style="width: 100%" ref="multipleTable"
            @selection-change="handleSelectionOptionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="内容" align="center" width="400px" prop="url">
              <template slot-scope="scope">
                <audio v-if="scope.row.selectOptionEnum=='audio'" :key="'audio_'+scope.row.id+'_'+scope.row.oldFileName"
                  :src="scope.row.url" controls preload="metadata">
                  您的浏览器不支持 audio 元素。
                </audio>
                <el-image v-if="scope.row.selectOptionEnum=='image'" style="width: 100px; height: 100px"
                  :src="scope.row.url"></el-image>
              </template>

            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete"
                  @click="handleDeleteSelectFile(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>


        <!-- 自定义选择 E-->




        <el-form-item label="句子" prop="sentences"
          v-if="wordsCondition(form.interaction)&&form.template!='line_custom' && form.wordSpelling==2">
          <el-tag v-for="tag in form.sentences" :key="tag.id" :effect="tag.selected ? 'dark' : 'light'"
            @click="toggleTag(tag)" @close="handleSentencesClose(tag)" closable :disable-transitions="false"
            style=" cursor: pointer">
            {{ tag.name }}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">添加句子单词</el-button>
        </el-form-item>

        <!-- 句子音拼 -->
        <el-form-item label="句子音频" prop="sentencesAudioArray"
          v-if="wordsCondition(form.interaction)&&form.template!='line_custom' && form.wordSpelling==2">
          <el-upload :limit="1" :auto-upload="false" action="" ref="sentencesAudioRef"
            :on-change="(file, fileList) =>handleChange(file, fileList,'sentencesAudioArray')" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'sentencesAudioArray')" accept="audio/*"
            :class="{ uploadIconOne: showImg, uploadIcon: form.sentencesAudioArray.length>=1 }"
            :file-list="form.sentencesAudioArray">
            <i class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <audio :src="file.url" class="full-size-video" controls="controls">
                <span>您的浏览器不支持音频播放</span>
              </audio>
              <div class="el-upload-list__item-actions" style="z-index:101;height:40%;">
                <span class="el-upload-list__item-delete" @click="handleDeleteVideo(file,'sentencesAudioArray')">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </div>
          </el-upload>
        </el-form-item>

        <!-- 句子图片 -->
        <el-form-item label="句子图片" prop="sentencesImageArray" v-if="form.wordSpelling==2 && form.interaction=='dub'">
          <el-upload :limit="1" :auto-upload="false" action="" ref="sentencesImageRef"
            :on-change="(file, fileList) =>handleChange(file, fileList,'sentencesImageArray')" list-type="picture-card"
            :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'sentencesImageArray')" accept="image/*"
            :class="{ uploadIconOne: showImg, uploadIcon: form.sentencesImageArray.length>=1 }"
            :file-list="form.sentencesImageArray">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="题目" prop="subjectText" v-if="form.interaction==='fill_in_the_blanks'" :rules="[
            { required: true, message: '请输入题目内容', trigger: 'blur' }
          ]">
          <el-input v-model="form.subjectText" placeholder="请输入题目名称" />
        </el-form-item>

        <el-form-item label="选项模式" prop="wordSpelling" v-if="form.interaction==='fill_in_the_blanks'">
          <el-switch v-model="form.wordSpelling" active-value="1" inactive-value="2" active-text="单词模式"
            @change="switchModel" inactive-text="句子模式">
          </el-switch>
        </el-form-item>

        <el-form-item label="选项" prop="rightWord" v-if="form.interaction==='fill_in_the_blanks'">
          <el-radio-group v-model="form.rightWord" size="small">
            <el-radio :key="word" v-for="(word,index) in form.words" :label="word"
              border>{{ String.fromCharCode(65 + index) }}. {{word}} <i class="el-icon-delete"
                @click="handleClose(word)"></i></el-radio>
          </el-radio-group>

          <el-button v-if="form.interaction==='fill_in_the_blanks' && this.form.wordSpelling==1" size="small"
            :style="{ 'margin-left': form.words.length > 0 ? '20px' : '0' }" icon="el-icon-plus"
            @click="openSelectWord(1)">添加单词</el-button>

          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
            @keyup.enter.native="handleInputBlankConfirm" @blur="handleInputBlankConfirm">
          </el-input>
          <el-button v-if="form.interaction==='fill_in_the_blanks' && this.form.wordSpelling==2 && !inputVisible"
            class="button-new-tag" size="small" @click="showInput">添加句子</el-button>
        </el-form-item>

        <!-- 蒙层部分   -->
        <el-row v-if="form.interaction=='mask_layer'">

          <el-col :span="8">
            <el-form-item label="上边距" prop="maskLayerTop">
              <el-input v-model="form.maskLayerTop" placeholder="请输入上边距"><template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下边距" prop="maskLayerBottom">
              <el-input v-model="form.maskLayerBottom" placeholder="请输入下边距"><template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="默认" prop="defaultMaskLayerShowModel">
              <el-radio-group v-model="form.defaultMaskLayerShowModel" size="mini">
                <el-radio label="show" border>显示</el-radio>
                <el-radio label="hide" border>隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="2*3" v-if="form.template=='mask_layer1'">
              <el-descriptions :column="3" size="small">
                <el-descriptions-item v-for="item in 6" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>

            <el-form-item label="1*3" v-if="form.template=='mask_layer2'">
              <el-descriptions :column="3" size="small">
                <el-descriptions-item v-for="item in 3" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>


            <el-form-item label="2*2" v-if="form.template=='mask_layer3'">
              <el-descriptions :column="2" size="small">
                <el-descriptions-item v-for="item in 4" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>

            <el-form-item label="3*4" v-if="form.template=='mask_layer4'">
              <el-descriptions :column="3" size="small">
                <el-descriptions-item v-for="item in 12" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>

            <el-form-item label="左右" v-if="form.template=='mask_layer5'">
              <el-descriptions :column="2" size="small">
                <el-descriptions-item v-for="item in 2" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>

            <el-form-item label="3*5" v-if="form.template=='mask_layer6'">
              <el-descriptions :column="5" size="small">
                <el-descriptions-item v-for="item in 15" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>

            <el-form-item label="3*3" v-if="form.template=='mask_layer7'">
              <el-descriptions :column="3" size="small">
                <el-descriptions-item v-for="item in 9" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>

            <el-form-item label="1*4" v-if="form.template=='mask_layer8'">
              <el-descriptions :column="4" size="small">
                <el-descriptions-item v-for="item in 4" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>

            <el-form-item label="4*2" v-if="form.template=='mask_layer9'">
              <el-descriptions :column="2" size="small">
                <el-descriptions-item v-for="item in 8" :key="item">
                  <el-upload :limit="1" :auto-upload="false" action="" :file-list="getMaskLayerFiles('mask_layer'+item)"
                    :ref="'mask_layer'+item"
                    :on-change="(file, fileList) =>handleChange(file, fileList,'mask_layer'+item)" accept="image/*"
                    list-type="picture-card"
                    :class="{ uploadIconOne: showImg, uploadIcon: getMaskLayerFiles('mask_layer'+item).length>=1 }"
                    :on-remove="(file, fileList) =>handleDeleteFile(file, fileList,'mask_layer'+item)">
                    <i slot="default" class="el-icon-plus"></i>
                  </el-upload>
                </el-descriptions-item>
              </el-descriptions>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="submitLoading">
          {{ submitLoading ? '提交中...' : '确定' }}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <SelectWord ref="selectWord" :open="wordFlag" @selected-data="selectedWordData"
      @close-select-window="closeSelectWord" />
  </div>
</template>

<script>
  import {
    listContent,
    getContent,
    delContent,
    addContent,
    updateContent,
    offline,
    online
  } from "@/api/bus_web/course/content";
  import {
    isEmpty
  } from "@/utils/validate"
  import {
    mapState
  } from 'vuex';
  import store from "@/store";
  import {
    Message
  } from 'element-ui'
  import SelectWord from '../../thesaurus/words/select.vue';
  export default {
    name: "Content",
    dicts: ['interaction_type', 'subject_type', 'common_state', 'interaction_template'],
    components: {
      SelectWord
    },
    data() {
      return {
        // 遮罩层
        showWordsSelectCon: 'line,classification,single_choice,dub,word_spelling',
        loading: true,
        wordFlag: false,
        //id 序号器
        idCounter: 0,
        nodeId: null,
        showImg: true, //默认展示
        // 选中数组
        ids: [],
        multipleSelectionOption: [],
        inputVisible: false,
        inputValue: '',
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        contentTotal: 0,
        // 题目内容表格数据
        contentList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //模版
        template: null,
        //选择ID
        curentSelectId: null,
        pageSizes: [8, 16, 24, 32, 40, 48],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 8,
          nodeId: null,
          subjectType: null,
          interaction: null,
          title: null,
          content: null,
          sortNo: null,
          state: null,
        },
        submitLoading: false,
        // 表单参数
        form: {
          //视频文件
          videoArray: [],
          musicArray: [],
          //图片文件
          imageArray: [],
          //主图 拖拽用
          mainImageArray: [],
          //主图 1 自定义使用
          main1ImageArray: [],
          //主图 2 自定义使用
          main2ImageArray: [],
          //蒙层文件
          maskLayerArray: [],
          //句子音拼
          sentencesAudioArray: [],
          //句子图片
          sentencesImageArray: [],
          words: [],
          defaultMaskLayerShowModel: null,
          //正确答案对应单词
          rightWord: null,
          subjectText: null,
          maskLayerTop: 1,
          maskLayerBottom: 1,
          sentences: [],
          // 挖空模式 1:单词 2:句子 默认 单词
          wordSpelling: "1",
          //自定义选择-图片
          subjectImage: [],
          //自定义选择-音频
          subjectAudio: [],
          //选项类型
          selectOptionEnum: null,
          selectOptionVOList: []
        },
        // 表单校验
        rules: {
          subjectType: [{
            type: 'string',
            required: true,
            message: "请选择类型",
            trigger: "change"
          }],
          sortNo: [{
            required: true,
            message: "请输入顺序",
            trigger: "blur"
          }],
          title: [{
            required: true,
            message: "请输入标题",
            trigger: "blur"
          }],
          videoUrl: [{
            validator: this.validateVideoSource,
            trigger: ['blur', 'change']
          }],
          videoArray: [{
            validator: this.validateVideoSource,
            trigger: 'change'
          }],
          imageArray: [{
            type: 'array',
            required: true,
            message: "请上传图片",
            trigger: "change"
          }],
          mainImageArray: [{
            type: 'array',
            required: true,
            message: "请上传图片",
            trigger: "change"
          }],
          main1ImageArray: [{
            type: 'array',
            required: true,
            message: "请上传图片",
            trigger: "change"
          }],
          main2ImageArray: [{
            type: 'array',
            required: true,
            message: "请上传图片",
            trigger: "change"
          }],
          words: [{
            type: 'array',
            required: true,
            message: "请选择单词",
            trigger: "change"
          }],
          sentences: [{
            type: 'array',
            required: true,
            message: "请填写句子",
            trigger: "change",
          }],
          sentencesAudioArray: [{
            type: 'array',
            required: true,
            message: "请上传句子音频",
            trigger: "change"
          }],
          sentencesImageArray: [{
            type: 'array',
            required: true,
            message: "请上传句子图片",
            trigger: "change"
          }],
          defaultMaskLayerShowModel: [{
            required: true,
            message: "请选择蒙层显示方式",
            trigger: ["change", "blur"]
          }],
          selectOptionEnum: [{
            required: true,
            message: "请选项类型不能为空",
            trigger: "change"
          }],
          wordSpelling: [{
            required: true,
            message: "模式不能为空",
            trigger: "blur"
          }],
          template: [{
            required: true,
            message: "请选择互动模板",
            trigger: "blur"
          }],

          interaction: [{
            required: true,
            message: "请选择互动类型",
            trigger: "blur"
          }],
          rightWord: [{
            required: true,
            message: "请选择正确答案",
            trigger: "blur"
          }],
          subjectAudioAndSubjectImage: [{
            required: false,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.form.subjectAudio.length < 1 && this.form.subjectImage.length < 1) {
               // callback(new Error('请选择图片或者音乐'));
                callback();
              } else {
                callback();
              }
            }
          }],
        }

      };
    },
    computed: {
      ...mapState({
        word: state => state.selectWord.word,
        wordSelectModel: state => state.selectWord.wordSelectModel,
      }),
      wordsCondition() {
        return (code) => {
          return this.showWordsSelectCon.indexOf(code) > -1
        };
      },
    },
    methods: {
      generateId() {
        return ++this.idCounter
      },
      init(nodeId) {
        this.contentTotal = 0
        this.contentList = []
        this.queryParams.nodeId = nodeId
        this.nodeId = nodeId
        this.template = null
        this.curentSelectRow = null
        this.getList()
      },
      /** 查询题目内容列表 */
      getList() {
        this.$modal.loading("数据加载中，请稍候...");
        this.loading = true;
        listContent(this.queryParams).then(response => {
          this.contentList = response.rows;
          this.contentTotal = response.total;
          this.loading = false;
          this.$modal.closeLoading();
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.template = null
        this.curentSelectRow = null
        this.form = {
          id: null,
          subjectType: null,
          interaction: null,
          videoUrl: null,
          title: null,
          content: null,
          sortNo: null,
          state: null,
          gmtCreate: null,
          gmtModify: null,
          deleted: null,
          createBy: null,
          updateBy: null,
          imageArray: [],
          videoArray: [],
          musicArray: [],
          mainImageArray: [],
          maskLayerArray: [],
          main1ImageArray: [],
          main2ImageArray: [],
          sentencesAudioArray: [],
          sentencesImageArray: [],
          sentences: [],
          defaultMaskLayerShowModel: null,
          words: [],
          template: null,
          rightWord: null,
          subjectText: null,
          maskLayerTop: 1,
          maskLayerBottom: 1,
          videoFlag: 0,
          // 挖空模式 1:单词 2:句子 默认 单词
          wordSpelling: "1",
          //自定义选择-图片
          subjectImage: [],
          //自定义选择-音频
          subjectAudio: [],
          selectOptionEnum: null,
          selectOptionVOList: [],
        };
        this.resetForm("form");
        this.multipleSelectionOption = []
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /**上线*/
      online(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认上线编号为"' + ids + '"的数据项？').then(function() {
          return online(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("上线成功");
        }).catch(() => {});
      },
      /**下线*/
      offline(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认下线编号为"' + ids + '"的数据项？').then(function() {
          return offline(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("下线成功");
        }).catch(() => {});
      },
      switchModel(val) {
        if (2 == val) {
          this.form.words = []
        } else {
          this.form.sentences = []
          this.form.sentencesAudioArray = []
          this.form.sentencesImageArray = []
        }
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加题目内容";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getContent(id).then(response => {
          let data = response.data
          this.open = true
          this.title = "修改题目内容"
          this.form.id = data.id
          this.form.title = data.title
          this.form.subjectType = data.subjectType
          this.form.sortNo = data.sortNo
          this.form.interaction = data.interaction
          this.form.template = data.template
          this.form.videoArray = []
          this.form.imageArray = []
          this.form.sentencesAudioArray = []
          this.form.mainImageArray = []

          this.form.maskLayerArray = []
          this.form.musicArray = []
          this.form.videoFlag = data.videoFlag
          this.curentSelectRow = row
          this.form.words = []
          if (1 == data.wordSpelling || 2 == data.wordSpelling) {
            this.form.wordSpelling = String(data.wordSpelling)
          }
          this.form.sentences = data.sentences
          if (2 == data.wordSpelling && this.form.interaction == 'word_spelling') {
            for (var i in data.sentences) {
              var _d = data.sentences[i]
              this.form.sentences.push({
                id: this.generateId(),
                name: _d.name,
                selected: _d.selected
              });
            }
          } else {
            this.form.sentences = data.sentences
          }
          this.form.sentencesImageArray = []
          this.form.sentencesAudioArray = []
          this.form.maskLayerTop = data.maskLayerTop
          this.form.maskLayerBottom = data.maskLayerBottom
          this.form.defaultMaskLayerShowModel = data.defaultMaskLayerShowModel
          this.form.mainImageArray = data.dragImageList.map(item => {
            return {
              id: item.id,
              url: item.httpFileUrl
            }
          })
          if ("video" === data.subjectType) {
            this.form.videoUrl = data.videoParams.videoUrl
            if (!isEmpty(data.videoParams.id)) {
              this.form.videoArray.push({
                id: data.videoParams.id,
                url: data.videoParams.httpFileUrl
              })
            }
            if (!isEmpty(data.imageParams.id)) {
              this.form.imageArray.push({
                id: data.imageParams.id,
                url: data.imageParams.httpFileUrl
              })
            }
          }
          if ("image" === data.subjectType || this.wordsCondition(this.form.interaction) || this.form
            .interaction === 'fill_in_the_blanks' || this.form.interaction === 'mask_layer' || this.form
            .interaction === 'drag') {
            //音乐
            if (!isEmpty(data.audioParams.id)) {
              this.form.videoArray.push({
                id: data.audioParams.id,
                url: data.audioParams.httpFileUrl
              })
            }
            //图片
            if (data.musicParams.length > 0) {
              this.form.musicArray = data.musicParams.map(item => {
                return {
                  id: item.id,
                  url: item.httpFileUrl,
                }
              })
            }
            //图片
            if (!isEmpty(data.imageParams.id)) {

              this.form.imageArray.push({
                id: data.imageParams.id,
                url: data.imageParams.httpFileUrl
              })
            }


          }

          if ("interaction" === data.subjectType && this.form.interaction != 'mask_layer') {
            this.form.words = data.words
          }
          this.template = data.template
          //填空
          if (this.form.interaction === 'fill_in_the_blanks') {
            this.form.subjectText = data.subjectText
            this.form.rightWord = data.rightWord
          }
          //蒙层
          if (this.form.interaction === 'mask_layer') {
            this.form.maskLayerArray = data.markLayerList.map(item => {
              item.opIndex = item.extraKey
              item.url = item.httpFileUrl
              return item
            })
          }
          if (this.form.template == 'line_custom') {
            this.form.words = []
            this.form.main1ImageArray = data.main1ImageArray.map(item => {
              return {
                id: item.id,
                name: item.name,
                url: item.httpFileUrl
              }
            })
            this.form.main2ImageArray = data.main2ImageArray.map(item => {
              return {
                id: item.id,
                name: item.name,
                url: item.httpFileUrl
              }
            })
          }
          this.form.sentencesAudioArray = []
          this.form.sentencesImageArray = []
          if (!isEmpty(data.sentencesAudioParams.id)) {
            this.form.sentencesAudioArray.push({
              id: data.sentencesAudioParams.id,
              url: data.sentencesAudioParams.httpFileUrl
            })
          }
          if (!isEmpty(data.sentencesImageParams.id)) {
            this.form.sentencesImageArray.push({
              id: data.sentencesImageParams.id,
              url: data.sentencesImageParams.httpFileUrl
            })
          }
          if (this.form.interaction == 'word_spelling' || this.form.interaction == 'dub') {
            this.form.sentences = data.wordSpellingSentences
          }

          //选择 自定义
          if (this.form.template === 'customize_select') {
            this.form.selectOptionEnum = data.selectOptionEnum
            this.form.subjectText = data.subjectText
            this.form.rightWord = data.rightWord
            if (!isEmpty(data.subjectAudio.id)) {
              this.form.subjectAudio.push({
                id: data.subjectAudio.id,
                url: data.subjectAudio.httpFileUrl
              })
            }
            if (!isEmpty(data.subjectImage.id)) {
              this.form.subjectImage.push({
                id: data.subjectImage.id,
                url: data.subjectImage.httpFileUrl
              })
            }
            //selectOptionVOList
            if ('text' == this.form.selectOptionEnum) {
              for (var i in data.selectOptionVOList) {
                this.form.selectOptionVOList.push({
                  id: this.generateId(),
                  textContent: data.selectOptionVOList[i].textContent,
                  selectOptionEnum: this.form.selectOptionEnum
                });
              }
            } else {
              var selectOption = []
              for (var i in data.selectOptionVOList) {
                var item = data.selectOptionVOList[i]
                var selectOptionData = {
                  uid: item.fileVideoParams.id,
                  id: item.fileVideoParams.id,
                  selectOptionEnum: this.form.selectOptionEnum,
                  url: item.fileVideoParams.httpFileUrl,
                  isRight: item.isRight
                }
                this.form.selectOptionVOList.push(selectOptionData)

                if ('YES' == selectOptionData.isRight) {
                  selectOption.push(selectOptionData)
                }
              }
              let that = this
              this.$nextTick(() => {
                this.toggleSelectionOption(selectOption)

              })
            }
          }
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.submitLoading = true
        if (this.form.interaction == 'word_spelling') {
          if (this.form.wordSpelling == 2) {
            let _validSend = this.form.sentences.filter(item => item.selected == true)
            if (_validSend.length < 1) {
              this.submitLoading = false
              Message.error('请设置挖空项！')
              return
            }
          }

        }
        this.$refs["form"].validate(valid => {
          if (valid) {

            const formData = new FormData()
            if (!isEmpty(this.form.id)) {
              formData.append('id', this.form.id)
            }
            formData.append('subjectType', this.form.subjectType)
            formData.append('sortNo', this.form.sortNo)
            formData.append('nodeId', this.nodeId)
            formData.append('title', this.form.title)
            formData.append('interaction', this.form.interaction)
            if (this.form.interaction == 'fill_in_the_blanks' || this.form.interaction == 'word_spelling' || this
              .form.interaction == 'dub') {
              formData.append('wordSpelling', this.form.wordSpelling)
            }
            if (this.form.sentences.length > 0) {

              //挖空
              for (var i in this.form.sentences) {
                var _sentences = this.form.sentences[i]
                formData.append('sentences[' + i + ']', _sentences.name)
                formData.append('wordSpellingSentences[' + i + '].id', _sentences.id)
                formData.append('wordSpellingSentences[' + i + '].name', _sentences.name)
                formData.append('wordSpellingSentences[' + i + '].selected', _sentences.selected)
              }
              if (this.form.sentencesAudioArray.length > 0) {
                for (var i in this.form.sentencesAudioArray) {
                  let file = this.form.sentencesAudioArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('sentencesAudioParams.id', file.id)
                  } else {
                    formData.append('sentencesAudioParams.file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                  break
                }
              }
              if (this.form.sentencesImageArray.length > 0) {
                for (var i in this.form.sentencesImageArray) {
                  let file = this.form.sentencesImageArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('sentencesImageParams.id', file.id)
                  } else {
                    formData.append('sentencesImageParams.file', file.raw)
                  }
                  break
                }
              }
            }
            //视频
            if (this.form.subjectType === 'video') {
              formData.append('videoParams.videoUrl', this.form.videoUrl)
              formData.append('videoFlag', this.form.videoFlag)
              for (var i in this.form.videoArray) {
                let file = this.form.videoArray[i]
                if (!isEmpty(file.id)) {
                  formData.append('videoParams.id', file.id)
                } else {
                  formData.append('videoParams.file', file.raw)
                  if (file.url?.startsWith('blob:')) {
                    URL.revokeObjectURL(file.url)
                  }
                }
                break
              }

              //背景图
              if (this.form.imageArray.length > 0) {
                for (var i in this.form.imageArray) {
                  let file = this.form.imageArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('imageParams.id', file.id)
                  } else {
                    formData.append('imageParams.file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                  break
                }
              }
            }

            //图片
            if (this.form.subjectType === 'image' || this.wordsCondition(this.form.interaction) || this.form
              .interaction === 'fill_in_the_blanks' || this.form
              .interaction === 'mask_layer' || this.form
              .interaction === 'drag') {
              //背景音乐
              if (this.form.videoArray.length > 0) {

                for (var i in this.form.videoArray) {
                  let file = this.form.videoArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('audioParams.id', file.id)
                  } else {
                    formData.append('audioParams.file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                  break
                }
              }
              //音乐
              if (this.form.musicArray.length > 0) {
                for (var i in this.form.musicArray) {
                  let file = this.form.musicArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('musicParams[' + i + '].id', file.id)
                  } else {
                    formData.append('musicParams[' + i + '].file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                }
              }

              //图片文件
              if (this.form.imageArray.length > 0) {
                for (var i in this.form.imageArray) {
                  let file = this.form.imageArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('imageParams.id', file.id)
                  } else {
                    formData.append('imageParams.file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                  break
                }
              }
            }
            //互动类型
            if (this.wordsCondition(this.form.interaction) || this.form.interaction === 'fill_in_the_blanks' || this
              .form.interaction === 'mask_layer') {
              if (this.form.words.length > 20) {
                this.$modal.msgError("单词数量不能超过20");
                return
              }
              for (var i in this.form.words) {
                formData.append('words[' + i + ']', this.form.words[i])
              }

              formData.append('template', this.form.template)
            }

            //选词填空
            if (this.form.interaction === 'fill_in_the_blanks') {
              formData.append('rightWord', this.form.rightWord)
              formData.append('subjectText', this.form.subjectText)
            }
            //蒙层
            if (this.form.interaction == 'mask_layer') {
              formData.append('maskLayerTop', this.form.maskLayerTop)
              formData.append('maskLayerBottom', this.form.maskLayerBottom)
              formData.append('defaultMaskLayerShowModel', this.form.defaultMaskLayerShowModel)
              if (this.form.maskLayerArray.length > 0) {
                for (var i in this.form.maskLayerArray) {
                  let file = this.form.maskLayerArray[i]
                  formData.append('markLayerList[' + i + '].extraKey', file.opIndex)
                  if (!isEmpty(file.id)) {
                    formData.append('markLayerList[' + i + '].id', file.id)
                  } else {
                    formData.append('markLayerList[' + i + '].file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                }
              }
            }
            //拖拽
            if (this.form.interaction === 'drag') {
              if (this.form.mainImageArray.length > 0) {
                for (var i in this.form.mainImageArray) {
                  let file = this.form.mainImageArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('dragImageList[' + i + '].id', file.id)
                  } else {
                    formData.append('dragImageList[' + i + '].file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                }
              }
            }
            if (this.form.template == 'line_custom') {
              if (this.form.main1ImageArray.length > 0) {
                for (var i in this.form.main1ImageArray) {
                  let file = this.form.main1ImageArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('main1ImageArray[' + i + '].id', file.id)
                  } else {
                    formData.append('main1ImageArray[' + i + '].file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                }
              }
              if (this.form.main2ImageArray.length > 0) {
                for (var i in this.form.main2ImageArray) {
                  let file = this.form.main2ImageArray[i]
                  if (!isEmpty(file.id)) {
                    formData.append('main2ImageArray[' + i + '].id', file.id)
                  } else {
                    formData.append('main2ImageArray[' + i + '].file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                }
              }
            }
            //选择-自定义
            if (this.form.template === 'customize_select') {
              formData.append('subjectText', this.form.subjectText)
              formData.append('selectOptionEnum', this.form.selectOptionEnum)
              //音频
              if (this.form.subjectAudio.length > 0) {
                for (var i in this.form.subjectAudio) {
                  let file = this.form.subjectAudio[i]
                  if (!isEmpty(file.id)) {
                    formData.append('subjectAudio.id', file.id)
                  } else {
                    formData.append('subjectAudio.file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                  break
                }
              }
              //图片
              if (this.form.subjectImage.length > 0) {
                for (var i in this.form.subjectImage) {
                  let file = this.form.subjectImage[i]
                  if (!isEmpty(file.id)) {
                    formData.append('subjectImage.id', file.id)
                  } else {
                    formData.append('subjectImage.file', file.raw)
                    if (file.url?.startsWith('blob:')) {
                      URL.revokeObjectURL(file.url)
                    }
                  }
                  break
                }
              }
              //选项

              if (this.form.selectOptionVOList.length > 0) {
                for (var i in this.form.selectOptionVOList) {
                  let selectOptData = this.form.selectOptionVOList[i]
                  formData.append('selectOptionVOList[' + i + '].selectOptionEnum', selectOptData.selectOptionEnum)
                  if (selectOptData.selectOptionEnum == 'text') {
                    formData.append('selectOptionVOList[' + i + '].textContent', selectOptData.textContent)
                    if (i == 0) {
                      formData.append('rightWord', this.form.rightWord)
                    }
                    formData.append('selectOptionVOList[' + i + '].isRight', selectOptData.textContent == this.form
                      .rightWord ? 'YES' : 'NO')
                  } else {
                    const index = this.multipleSelectionOption.findIndex(
                      item => item.uid === selectOptData.uid
                    );
                    formData.append('selectOptionVOList[' + i + '].isRight', index > -1 ? 'YES' : 'NO')
                    console.log('======', index)
                    console.log('===s===', selectOptData)
                    if (!isEmpty(selectOptData.id)) {
                      console.log('===id===', index)
                      formData.append('selectOptionVOList[' + i + '].fileVideoParams.id', selectOptData.id)
                    } else {
                      console.log('===f===', index)
                      formData.append('selectOptionVOList[' + i + '].fileVideoParams.file', selectOptData.raw)
                      if (selectOptData.url?.startsWith('blob:')) {
                        URL.revokeObjectURL(selectOptData.url)
                      }
                    }
                  }
                }
              }
            }
            if (this.form.id != null) {
              updateContent(formData).then(response => {

                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.submitLoading = false
              })
            } else {
              addContent(formData).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.submitLoading = false
              })
            }
          } else {
            this.submitLoading = false
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除题目内容编号为"' + ids + '"的数据项？').then(function() {
          return delContent(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('course/content/export', {
          ...this.queryParams
        }, `content_${new Date().getTime()}.xlsx`)
      },

      validateVideoSource(rule, value, callback) {
        // 仅当类型为视频时进行验证
        if (this.form.subjectType !== 'video') {
          callback();
          return;
        }

        const hasUrl = !!this.form.videoUrl;
        const hasFile = this.form.videoArray?.length > 0;

        if (!hasUrl && !hasFile) {
          callback(new Error('请上传视频文件或填写视频链接'));
        } else {
          callback();
        }
      },

      // 安全获取对应模板的文件列表
      getMaskLayerFiles(op) {
        return this.form.maskLayerArray.filter(f => f?.opIndex === op);
      },
      // 选项文件选中项
      handleSelectionOptionChange(valOption) {
        this.multipleSelectionOption = valOption;
      },
      // 设置选项选中
      toggleSelectionOption(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //切换选项
      switchSelectOptionModel(val) {
        //清空集合
        for (var i in this.form.selectOptionVOList) {
          const targetFile = this.form.selectOptionVOList[i]
          if (targetFile.selectOptionEnum == 'text') {
            continue
          }
          if (targetFile.url?.startsWith('blob:')) {
            URL.revokeObjectURL(targetFile.url)
          }
        }
        this.form.selectOptionVOList = []
      },
      handleSelectOptionChange(file, fileList) {
        const newFile = {
          ...file
        }
        this.form.selectOptionVOList.push(newFile)
        this.form.selectOptionVOList = this.form.selectOptionVOList.map((item, index) => {
          return {
            ...item,
            uid: item.uid,
            selectOptionEnum: this.form.selectOptionEnum,
            url: isEmpty(item.url) ? URL.createObjectURL(item.raw) : item.url
          };
        })
      },
      //删除选项
      handleDeleteSelectFile(row) {
        const index = this.form.selectOptionVOList.findIndex(
          item => item.uid === row.uid
        );

        if (index > -1) {
          const targetFile = this.form.selectOptionVOList[index]
          if (targetFile.url?.startsWith('blob:')) {
            URL.revokeObjectURL(targetFile.url)
          }
          this.$delete(this.form.selectOptionVOList, index)
        }
      },
      handleChange(file, fileList, op) {
        if ('sentencesAudioArray' == op) {
          for (var i in this.form.sentencesAudioArray) {
            let targetFile = fileList[i]
            if (targetFile.url?.startsWith('blob:')) {
              URL.revokeObjectURL(targetFile.url)
            }
          }
          this.form.sentencesAudioArray = fileList.map((item, index) => {
            return {
              ...item,
              url: isEmpty(item.url) ? URL.createObjectURL(item.raw) : item.url
            };
          })
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('sentencesAudioArray')
          })
        } else if ('sentencesImageArray' == op) {
          this.form.sentencesImageArray = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('sentencesImageArray')
          })
        } else if ('main_image' == op) {
          this.form.mainImageArray = fileList
        } else if ('main_image_1' == op) {
          for (var i in this.form.main1ImageArray) {
            let targetFile = fileList[i]
            if (targetFile.url?.startsWith('blob:')) {
              URL.revokeObjectURL(targetFile.url)
            }
          }
          this.form.main1ImageArray = fileList.map((item, index) => {
            return {
              ...item,
              url: isEmpty(item.url) ? URL.createObjectURL(item.raw) : item.url
            };
          })

          this.$nextTick(() => {
            this.$refs.form.validateField('main1ImageArray')
          })
        } else if ('main_image_2' == op) {

          for (var i in this.form.main2ImageArray) {
            let targetFile = fileList[i]
            if (targetFile.url?.startsWith('blob:')) {
              URL.revokeObjectURL(targetFile.url)
            }
          }

          this.form.main2ImageArray = fileList.map((item, index) => {
            return {
              ...item,
              url: isEmpty(item.url) ? URL.createObjectURL(item.raw) : item.url
            };
          })
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('main2ImageArray')
          })

        } else if ('image' == op) {
          this.form.imageArray = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('imageArray')
          })
        } else if (op == 'music') {
          for (var i in this.form.musicArray) {
            let targetFile = fileList[i]
            if (targetFile.url?.startsWith('blob:')) {
              URL.revokeObjectURL(targetFile.url)
            }
          }

          this.form.musicArray = fileList.map((item, index) => {
            return {
              ...item,
              url: isEmpty(item.url) ? URL.createObjectURL(item.raw) : item.url
            };
          })

        } else if ('video' == op) {
          for (var i in this.form.videoArray) {
            let targetFile = fileList[i]
            if (targetFile.url?.startsWith('blob:')) {
              URL.revokeObjectURL(targetFile.url)
            }
          }
          this.form.videoArray = fileList.map((item, index) => {
            return {
              ...item,
              url: isEmpty(item.url) ? URL.createObjectURL(item.raw) : item.url
            };
          })
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('videoArray')
          })
        } else if (op.indexOf('mask_layer') > -1) {
          file.opIndex = op
          let flag = 1
          if (this.form.maskLayerArray.length > 0) {
            for (var index in this.form.maskLayerArray) {
              let f = this.form.maskLayerArray[index]
              if (f.opIndex == op) {
                this.form.maskLayerArray[index] = file
                flag = 2
              }
            }
          }
          if (flag == 1) {
            this.form.maskLayerArray.push(file)
          }
        } else if (op.indexOf('mask_layer') > -1) {
          file.opIndex = op
          let flag = 1
          if (this.form.maskLayerArray.length > 0) {
            for (var index in this.form.maskLayerArray) {
              let f = this.form.maskLayerArray[index]
              if (f.opIndex == op) {
                this.form.maskLayerArray[index] = file
                flag = 2
              }
            }
          }
          if (flag == 1) {
            this.form.maskLayerArray.push(file)
          }
        } else if ('subjectImage' == op) {
          this.form.subjectImage = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('subjectAudioAndSubjectImage')
          })
        } else if (op == 'subjectAudio') {
          for (var i in this.form.subjectAudio) {
            let targetFile = fileList[i]
            if (targetFile.url?.startsWith('blob:')) {
              URL.revokeObjectURL(targetFile.url)
            }
          }

          this.form.subjectAudio = fileList.map((item, index) => {
            return {
              ...item,
              url: isEmpty(item.url) ? URL.createObjectURL(item.raw) : item.url
            };
          })
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('subjectAudioAndSubjectImage')
          })
        }
      },
      handleDeleteFile(file, fileList, op) {
        if ('main_image' == op) {
          this.form.mainImageArray = fileList
        } else if ('main_image_1' == op) {
          this.form.main1ImageArray = fileList
        } else if ('main_image_2' == op) {
          this.form.main2ImageArray = fileList
        } else if ('image' == op) {
          this.form.imageArray = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('imageArray')
          })
        } else if (op == 'music') {
          if (file.url?.startsWith('blob:')) {
            URL.revokeObjectURL(file.url)
          }
          this.form.musicArray = fileList
        } else if ('video' == op) {
          if (file.url?.startsWith('blob:')) {
            URL.revokeObjectURL(file.url)
          }
          this.form.videoArray = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('videoArray')
          })
        } else if (op.indexOf('mask_layer') > -1) {
          this.form.maskLayerArray = this.form.maskLayerArray.filter(f => f?.opIndex != op)
        } else if ('sentencesAudioArray' == op) {
          if (file.url?.startsWith('blob:')) {
            URL.revokeObjectURL(file.url)
          }
          this.form.sentencesAudioArray = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('sentencesAudioArray')
          })
        } else if ('sentencesImageArray' == op) {
          this.form.sentencesImageArray = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('sentencesImageArray')
          })
        } else if ('subjectImage' == op) {
          this.form.subjectImage = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('subjectAudioAndSubjectImage')
          })
        } else if (op == 'subjectAudio') {
          if (file.url?.startsWith('blob:')) {
            URL.revokeObjectURL(file.url)
          }
          this.form.subjectAudio = fileList
          // 触发验证
          this.$nextTick(() => {
            this.$refs.form.validateField('subjectAudioAndSubjectImage')
          })
        }
      },
      //删除视频
      handleDeleteVideo(file, op) {
        if (op == 'music') {
          this.$refs.musicRef.handleRemove(file); // 触发组件内部删除逻辑
        } else if (op == 'sentencesAudioArray') {
          this.$refs.sentencesAudioRef.handleRemove(file); // 触发组件内部删除逻辑
        } else if (op == 'sentencesImageArray') {
          this.$refs.sentencesImageRef.handleRemove(file); // 触发组件内部删除逻辑
        } else if (op == 'subjectAudio') {
          this.$refs.subjectAudioRef.handleRemove(file);
        } else {
          this.$refs.videoRef.handleRemove(file); // 触发组件内部删除逻辑
        }
      },
      // 删除主图 文件之类的
      handleDeleteRefFile(file, ref) {
        this.$refs[ref].handleRemove(file); // 触发组件内部删除逻辑
      },
      //蒙层
      handleMarkLayerImg(file, op) {
        this.$refs[op][0].handleRemove(file); // 触发组件内部删除逻辑
      },
      //删除单词
      handleClose(word) {
        this.form.words.splice(this.form.words.indexOf(word), 1);
        this.$nextTick(() => {
          this.$refs.form.validateField('words')
        })
      },
      //输入句子
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      //确定输入句子
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.form.sentences.push({
            id: this.generateId(),
            name: inputValue,
            selected: false
          });
          //this.form.sentences.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      //填空确定输入句子
      handleInputBlankConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.form.words.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      //自定义选择确定输入句子
      handleInputSelectConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {

          this.form.selectOptionVOList.push({
            id: this.generateId(),
            textContent: inputValue,
            selectOptionEnum: this.form.selectOptionEnum
          });
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      // 删除句子
      handleSelectClose(item) {
        this.form.selectOptionVOList = this.form.selectOptionVOList.filter(tag => tag.id != item.id);
        this.$nextTick(() => {
          this.$refs.form.validateField('selectOptionVOList')
        })
      },
      // 切换选中状态
      toggleTag(tag) {
        tag.selected = !tag.selected;
      },
      // 删除句子
      handleSentencesClose(item) {
        this.form.sentences = this.form.sentences.filter(tag => tag.id != item.id);
        this.$nextTick(() => {
          this.$refs.form.validateField('sentences')
        })
      },
      //选择等级
      openSelectWord(selectVal) {
        this.wordFlag = true
        // selectVal =1 查询模式 =2 创建、修改模式
        this.$store.dispatch('selectWord/cleanWord')
        this.$store.dispatch('selectWord/setWordSelectModel', selectVal)
      },
      closeSelectWord() {
        this.wordFlag = false
      },
      //确定单词
      selectedWordData() {
        this.closeSelectWord()
        this.form.words = [...new Set([...this.form.words, ...this.word.map(item => item.word)])]
        this.$store.dispatch('selectWord/cleanWord')
        this.$nextTick(() => {
          this.$refs.form.validateField('words')
        })
      },
      //切换的时候进行数据清空
      switchTemplate() {
        this.form.maskLayerArray = []
      },
      isImage(file) {
        // 简单地通过后缀判断是否为图片
        return ['.jpg', '.jpeg', '.png', '.gif'].some(ext => file.name.toLowerCase().endsWith(ext));
      },
      isAudio(file) {
        // 简单地通过后缀判断是否为音频
        return ['.mp3', '.wav', '.ogg'].some(ext => file.name.toLowerCase().endsWith(ext));
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 400px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .full-size-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .el-upload-list__item,
  .el-upload-list__item .el-upload-list__item-thumbnail {
    width: 150px;
    height: 120px;
    position: relative;
  }

  .sentence-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .custom-tag {
    margin-right: 8px;
    /* 设置标签之间的间距 */
  }

  .custom-tag:last-child {
    margin-right: 0;
    /* 最后一个标签不需要右边距 */
  }

  .box-card {
    margin-bottom: 2vh;
  }

  .uploadIcon ::v-deep .el-upload--picture-card {
    display: none !important;
    /* 上传按钮隐藏 */
  }
</style>
